<template>
  <div>
    <van-nav-bar title="消息中心" left-arrow>
      <template #right>
        <!-- <van-icon name="search" size="18" /> -->
        <span style="color: #fff; marginright: 10px">排序</span>
        <img src="../assets/消息中心/排序.png" width="20" alt="" />
      </template>
    </van-nav-bar>
    <van-tabs v-model="active">
      <van-tab>
        <template #title>
          全部消息
          <img
            v-show="!ifshow == 0"
            class="img"
            src="../assets/消息中心/红点.png"
            width="12"
            alt=""
        /></template>
        <MessagetText :Arr="Arr" :active='active'/>
      </van-tab>
      <van-tab>
        <template #title
          >系统消息
          <img
            class="img"
            v-show="!ifshow1 == 0"
            src="../assets/消息中心/红点.png"
            width="12"
            alt=""
          />
        </template>
        <MessagetText :Arr="Arr1" :active='active'/>
      </van-tab>
      <van-tab>
        <template #title>
          个人消息
          <img class="img" v-show="!ifshow2==0" src="../assets/消息中心/红点.png" width="12" alt=""
        /></template>
        <MessagetText :Arr="Arr2" :active='active'/>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import MessagetText from "../components/MessagetText";
import { Message } from "../request/api";
export default {
  data() {
    return {
      active: 0,
      //全部
      Arr: [],
      ifshow: "",
      //系统
      Arr1: [],
      ifshow1: "",
      //个人
      Arr2: [],
      ifshow2: "",
    };
  },
  components: {
    MessagetText,
  },
  created() {
    let num=this.$route.query.active;
    this.active = Number(num)
    console.log(num);
    //全部
    Message({
      type: 0,
    }).then((res) => {
      this.Arr = res.data.records;
      let ifshowdian = this.Arr.filter((item) => item.isReader == 1);
      this.ifshow = ifshowdian.length;
    });
    //系统
    Message({
      type: 1,
    }).then((res) => {
      this.Arr1 = res.data.records;
      let ifshowdian = this.Arr1.filter((item) => item.isReader == 1);
      this.ifshow1 = ifshowdian.length;
    });
    //个人
    Message({
      type: 2,
    }).then((res) => {
      this.Arr2 = res.data.records;
      let ifshowdian = this.Arr2.filter((item) => item.isReader == 1);
      this.ifshow2 = ifshowdian.length;
    });
  },
  methods: {
  },
};
</script>
 
<style lang = "less" scoped>
/deep/ .van-nav-bar__content {
  background: #003399;
  .van-nav-bar__title {
    color: #fff;
  }

  .van-icon {
    color: #fff;
  }
}
/deep/ .van-tabs__line {
  width: 60px;
  background-color: #ffcc33;
}
/deep/ .van-tab--active {
  color: #003399;
}

.img {
  position: absolute;
  top: 5px;
  right: 28px;
}
</style>